<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>汉心码学习选择</title>
  <style>
    body {

      background-image: linear-gradient(to right, #4cbf30 -30%, #0f9d58);


      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

h1 {
  text-align: center;
  font-size: 5em;
  margin: 0.5em;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 15px; /* 设置字间距为2px */
}
    h2 {
      font-size: 1.2em;
      color: #ffffff;
      /* 设置超链接颜色为蓝色 */
      margin: 0.5em;
      font-weight: 400;
      /* 设置字体为细体 */
    }





    a {
      text-decoration: none;
      /* 去掉超链接下划线 */
      color: #ffffff;
      /* 设置超链接颜色为蓝色 */
      margin: 0 0.5em;
      /* 添加超链接之间的间距 */




    }

    @media screen and (min-width: 1200px) {
  .links {
    display: flex;
    flex-wrap: wrap;
  }

  .link {
    flex: 1 0 auto;
  }
}
@media screen and (max-width:  1200px) {
  .links {
    display: block;
    font-size: 38px;
  }

  .link {
    margin-bottom: 10px;
  }
  h1 {
    font-size: 128px;
  }
}
  </style>
</head>

<body>
  <h1>汉心码学习</h1>
  <div class="links">


    <div class="link"><h2><a href="/js/sjsy" target="_blank">网页输入法体验式学习</a></h2></div>
    <div class="link"><h2><a href="/2022/01/01/xue-xi-mu-lu/" target="_blank">视频文字详细学习</a></h2></div>

  
  
  
  </div>
</body>
<script>
  window.onload = function () {
    const h2Elements = document.querySelectorAll('h2');
    h2Elements.forEach((element, index) => {
      setTimeout(() => {
        breathe(element);
      }, index * 500); // 设置不同的初始延迟，例如每个元素之间相隔500毫秒
    });
  }

  function breathe(element) {
    let opacity = 1;
    let direction = -0.05;

    setInterval(() => {
      opacity += direction;

      if (opacity <= 0.1 || opacity >= 1) {
        direction = -direction;
      }

      element.style.opacity = opacity;
    }, 100);
  }

</script>

</html>